<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <style> 
        .container {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 300px;
            background-color: rgb(240, 19, 19);
            color: #fff;
        }
        .timer {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 60px;
            background-color: #000;
        }
        .item {
            float: left;
            width: 30px;
            height: 30px;
            margin: 15px 5px;
            text-align: center;
            line-height: 30px;
            font-size: 18px;
            font-weight: 700;
        }
    </style>
    <script>
        onload = function() {
            let items = document.querySelectorAll('.item')
            let inputTime = +new Date('2020-7-17 20:00:00')
            countdown()
            function countdown() {
                let newTime = +new Date()
                let times = (inputTime - newTime) / 1000
                let hh = parseInt(times / 60 / 60 % 24)
                hh = hh < 10 ? '0' + hh : hh
                let mm = parseInt(times / 60 % 60) 
                mm = mm < 10 ? '0' + mm : mm
                let ss = parseInt(times % 60)
                ss = ss < 10 ? '0' + ss : ss
                items[0].innerHTML = hh
                items[1].innerHTML = mm
                items[2].innerHTML = ss
            }
            setInterval(countdown, 1000)
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="timer">
            <span class="item">1</span>
            <span class="item">2</span>
            <span class="item">3</span>
        </div>
    </div>
</body>
</html>